<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>MVC DOH Test</title>

	<style>
		@import "../../../../dojo/resources/dojo.css";
		@import "../../../../dijit/tests/css/dijitTests.css";
		@import "css/app-format.css";
	</style>

	<!-- required: the default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script src="../../../../dojo/dojo.js" type="text/javascript"
		djConfig="isDebug: true">
	</script>
	<script type="text/javascript" src="./helpers.js"></script>

	<script type="text/javascript" >
		dojo.require("dojox.mvc");
		dojo.require("dojox.mvc.Group");
		dojo.require("dojox.mvc.Repeat");
		dojo.require("dijit.form.TextBox");
		dojo.require("dijit.form.Button");
		dojo.require("dojo.parser");

		// Raw records for the master detail
		var search_results_init =
		{
		  "Query" : "Engineers",
		  "Results" : [
			  {
				  "First"	: "Anne",
				  "Last"	: "Ackerman",
				  "Location": "NY",
				  "Office"	: "1S76",
				  "Email"	: "a.a@test.com",
				  "Tel"		: "123-764-8237",
				  "Fax"		: "123-764-8228"
			  },
			  {
				  "First"	: "Ben",
				  "Last"	: "Beckham",
				  "Location": "NY",
				  "Office"	: "5N47",
				  "Email"	: "b.b@test.com",
				  "Tel"		: "123-764-8599",
				  "Fax"		: "123-764-8600"
			  },
			  {
				  "First"	: "Chad",
				  "Last"	: "Chapman",
				  "Location": "CA",
				  "Office"	: "1278",
				  "Email"	: "c.c@test.com",
				  "Tel"		: "408-764-8237",
				  "Fax"		: "408-764-8228"
			  },
			  {
				  "First"	: "David",
				  "Last"	: "Durham",
				  "Location": "NJ",
				  "Office"	: "C12",
				  "Email"	: "d.d@test.com",
				  "Tel"		: "514-764-8237",
				  "Fax"		: "514-764-8228"
			  },
			  {
				  "First"	: "Emma",
				  "Last"	: "Eklof",
				  "Location": "NY",
				  "Office"	: "4N76",
				  "Email"	: "e.e@test.com",
				  "Tel"		: "123-764-1234",
				  "Fax"		: "123-764-4321"
			  },
			  {
				  "First"	: "Fred",
				  "Last"	: "Fisher",
				  "Location": "NJ",
				  "Office"	: "V89",
				  "Email"	: "f.f@test.com",
				  "Tel"		: "514-764-8567",
				  "Fax"		: "514-764-8000"
			  },
			  {
				  "First"	: "George",
				  "Last"	: "Garnett",
				  "Location": "NY",
				  "Office"	: "7S11",
				  "Email"	: "gig@test.com",
				  "Tel"		: "123-999-8599",
				  "Fax"		: "123-999-8600"
			  },
			  {
				  "First"	: "Hunter",
				  "Last"	: "Huffman",
				  "Location": "CA",
				  "Office"	: "6532",
				  "Email"	: "h.h@test.com",
				  "Tel"		: "408-874-8237",
				  "Fax"		: "408-874-8228"
			  },
			  {
				  "First"	: "Irene",
				  "Last"	: "Ira",
				  "Location": "NJ",
				  "Office"	: "F09",
				  "Email"	: "i.i@test.com",
				  "Tel"		: "514-764-6532",
				  "Fax"		: "514-764-7300"
			  },
			  {
				  "First"	: "John",
				  "Last"	: "Jacklin",
				  "Location": "CA",
				  "Office"	: "6701",
				  "Email"	: "j.j@test.com",
				  "Tel"		: "408-764-1234",
				  "Fax"		: "408-764-4321"
			  }
		  ]
	  };

	  // The dojox.mvc.StatefulModel class creates a data model instance
	  // where each leaf within the data model is decorated with dojo.Stateful
	  // properties that widgets can bind to and watch for their changes.
	  var searchRecords = dojox.mvc.newStatefulModel({ data : search_results_init });
	</script>

	<script type="text/javascript">
		dojo.require('doh.runner');
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them

		dojo.addOnLoad(function(){

			doh.register("parse", function(){
				dojo.parser.parse();
			});

			// should be able to verify all of the inputs 
			doh.register("Check initial values and bindings", [
				{
					name: "initial",
					runTest: function(){
						var name1, bind1, firstInput; 
						name1 = dijit.byId("nameInput0");
						if (name1) {
							bind1 = name1.get("binding");
							if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
								doh.is("Anne",bind1.data,"bind1.data should be set");
								doh.is("Anne",bind1.value,"bind1.value should be set");
							}
						}

						firstInput = dijit.byId("firstInput");
						if (firstInput) {
							bind1 = firstInput.get("binding");
							if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
								doh.is("Anne",bind1.data,"bind1.data should be set");
								doh.is("Anne",bind1.value,"bind1.value should be set");
							}
						}
					}
				}
			]);

			doh.register("select Ben", [
				{
					name: "testBen",
					runTest: function(){
						setDetailsContext(1);
						var name1, bind1, firstInput; 
						name1 = dijit.byId("nameInput1");
						if (name1) {
							bind1 = name1.get("binding");
							if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
								doh.is("Ben",bind1.data,"bind1.data is wrong");
								doh.is("Ben",bind1.value,"bind1.value is wrong");
							}
						}

						firstInput = dijit.byId("firstInput");
						if (firstInput) {
							bind1 = firstInput.get("binding");
							if (bind1 && bind1.isInstanceOf(dojox.mvc.StatefulModel)) {
								console.debug("firstInput.value="+firstInput.value);
								doh.is("Ben",bind1.data,"firstInput bind1.data is wrong");
								doh.is("Ben",bind1.value,"firstInput bind1.value is wrong");
							}
						}
					}					
				}
			]);

			doh.run();

		});
	</script>
</head>
<body class="claro">
	<h1 class="testTitle">doh_mvc_search-results-repeat.html automated tests (non-robot)</h1>
		<div id="wrapper">
		<div id="header">
		  <div id="navigation">
		  </div>
		  <div id="headerInsert">
			<h1>Employee Search</h1>
			<h2>Master Detail Example - With repeat container.</h2>
		  </div>
		</div>
		<div id="main">
		 <div id="leftNav">
		 </div>
		 <div id="mainContent">
		 <!--
			 The group container denotes some logical grouping of widgets and also serves
			 to establish a parent data binding context for its children.
			 The ref attribute for the outermost container obtains the binding from the
			 "page scope" itself.
		 -->
		 <div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'searchRecords'">
			<div class="row">
				<label class="cell" for="queryInput">Search for:</label>
				<input class="cell" id="queryInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Query'"/>
				<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setSearchBanner();}">Search</button>
			</div>
			<div class="spacer"></div>

			<div id="searchBanner">Search Results for term: Engineers</div>

			<!--
				The repeat container denotes a templated UI that operates over a collection
				of data records.
				The UI can be customized for each iteration using properties such as
				${this.index} for the iteration index.
			-->
			<div data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'Results'">
				<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'">
					<label class="cell" for="nameInput${this.index}">Name:</label>
					<input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}" data-dojo-props="ref: 'First'"/>
					<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setDetailsContext('${this.index}');}">Details</button>
				</div>
			</div>
			<div class="spacer"></div>

			<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'Results'">
				<div id="detailsBanner">Details for result index: 0</div>

				<div id="detailsGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '0'">
					<div class="row">
						<label class="cell" for="firstInput">First Name:</label>
						<input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'First'"/>
					</div>
					<div class="row">
						<label class="cell" for="lastInput">Last Name:</label>
						<input class="cell" id="lastInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Last'"/>
					</div>
					<div class="row">
						<label class="cell" for="locationInput">Location:</label>
						<input class="cell" id="locationInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Location'"/>
					</div>
					<div class="row">
						<label class="cell" for="officeInput">Office:</label>
						<input class="cell" id="officeInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Office'"/>
					</div>
					<div class="row">
						<label class="cell" for="emailInput">Email:</label>
						<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Email'"/>
					</div>
					<div class="row">
						<label class="cell" for="telInput">Telephone:</label>
						<input class="cell" id="telInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Tel'"/>
					</div>
					<div class="row">
						<label class="cell" for="faxInput">Fax:</label>
						<input class="cell" id="faxInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Fax'"/>
					</div>
				</div>
			</div>
		</div>
		</div>
	</div>
	<script type="text/javascript">
	function setDetailsContext(index) {
		var widget = dijit.byId("detailsGroup");
		widget.set("ref", index);
		var detailsBanner = dojo.byId("detailsBanner");
		detailsBanner.innerHTML = "Details for result index: " + index;
	}
	function setSearchBanner() {
		var searchBanner = dojo.byId("searchBanner");
		searchBanner.innerHTML = "Search Results for term: " + searchRecords.Query.get("value");
	}
	</script>
</body>
</html>
